<template>
  <view class="product">
    <scroll-view
        class="scroll-view"
        scroll-y
        @scrolltolower="loadMore"
        :lower-threshold="50"
    >
      <view class="content">
        <view class="list">
          <view class="item" v-for="(item,index) in goods"
                @click="jumpFn(item.id)"
                :key="index">
            <uv-image :src="item.goods_img" width="120px" height="120px"></uv-image>
            <view class="title">{{item.goods_name}}</view>
            <view class="box">
              <uv-text :text="`￥${item.goods_price}`" color="red"></uv-text>
              <uv-icon name="shopping-cart" color="#3c9cff" size="30px"></uv-icon>
            </view>
          </view>
        </view>
        <uv-load-more :status="loadStatus" />
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import {ref, onMounted} from "vue"
import {GoodList} from "@/request/api"

const goods = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const loadStatus = ref('loadmore') // loading: 加载中, nomore: 没有更多了, loadmore: 可加载更多
const total = ref(0)

// 获取商品列表
const fetchGoods = async () => {
  if (loadStatus.value === 'loading' || loadStatus.value === 'nomore') return

  loadStatus.value = 'loading'

  try {
    const res = await GoodList({
      pageNum: pageNum.value,
      pageSize: pageSize.value
    })

    if (res.code === 0) {
      goods.value = [...goods.value, ...res.result.list]
      total.value = res.result.total
      pageNum.value++
      console.log(pageNum.value, '000')
      // 判断是否还有更多数据
      if (goods.value.length >= total.value) {
        loadStatus.value = 'nomore'
      } else {
        loadStatus.value = 'loadmore'
      }
    } else {
      console.error(res.msg)
      loadStatus.value = 'loadmore'
    }
  } catch (err) {
    console.error('获取商品列表失败', err)
    loadStatus.value = 'loadmore'
  }
}

// 滚动到底部加载更多
const loadMore = () => {
  fetchGoods()
}

onMounted(() => {
  fetchGoods()
})

const jumpFn = (id) => {
  uni.navigateTo({
    url: '/pages/detail/detail?id='+id
  })
}
</script>

<style scoped lang="scss">
.product {
  width: 100%;
  height: 100vh;
  padding: 0 15px;
  box-sizing: border-box;

  .scroll-view {
    height: 100%;
  }

  .content {
    width: 100%;

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        width: calc(50% - 7.5px);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
        padding: 15px;
        background-color: #FFFFFF;

        &:nth-child(2n) {
          margin-right: 0;
        }

        .title {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          margin: 10px 0;
        }

        .box {
          display: flex;
          justify-content: space-between;
          width: 100%;
        }
      }
    }
  }
}
</style>